<template>
  <div style="padding:30px;">
    <el-alert :closable="false" title="下拉列表" type="success" />
    <TableSelect v-model="username" name="username" placeholder="请选择用户" :multi-select="true" :page-size="5" url="api/users" :columns="Columns" @select="handlerSelect" />
    <TableSelect v-model="username2" name="name" placeholder="请选择角色" :multi-select="false" :page-size="5" url="api/roles" :columns="Columns2" @select="handlerSelect" />
  </div>
</template>
<script type="text/ecmascript-6">
import TableSelect from '@/components/TableSelect'
export default {
  components: { TableSelect },
  data() {
    return {
      username: 'daiweiwei,nih',
      username2: '李照理,到微微',
      Columns: [
        {
          prop: 'username',
          label: '用户名'
        },
        {
          prop: 'nickName',
          label: '昵称'
        },
        {
          prop: 'phone',
          label: '手机号码'
        },
        {
          prop: 'gender',
          label: '性别'
        },
        {
          prop: 'email',
          label: '邮箱'
        }
      ],
      Columns2: [
        {
          prop: 'name',
          label: '角色名'
        }
      ]
    }
  },
  mounted() {

  },
  methods: {
    handlerSelect(row) {
      debugger
    }
  }
}
</script>
